<template>
    <div class="wrap-table">
        <el-form ref="form" :model="searchData" label-width="100px" class="clearfix">
            <el-form-item label="转移社区时间" class="pull-left" label-width="100px">
                <div class="block" style="width: 300px">
                    <el-date-picker
                            v-model="timeDate"
                            type="daterange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            value-format="yyyy-MM-dd"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="pickerOptions">
                    </el-date-picker>
                </div>
            </el-form-item>
	        <el-form-item label="所在地区" class="pull-left item-right" style="width:200px">
		        <el-select v-model="searchData.inDistrictNo" placeholder="请选择" @change="changeDis" clearable>
			        <el-option
					        v-for="item in optionDiq1"
					        :key="item.DistrictName"
					        :label="item.DistrictName"
					        :value="item.DistrictNo">
			        </el-option>
		        </el-select>
	        </el-form-item>
	        <el-form-item label="所在社区" class="pull-left item-right" style="width:200px">
		        <el-select v-model="CtyIds" placeholder="请选择" @change="Commutysp" clearable>
			        <el-option
					        v-for="item in optionsData1"
					        :key="item.SYS_ID"
					        :label="item.CName"
					        :value="item">
			        </el-option>
		        </el-select>
	        </el-form-item>
	        <el-form-item label="转入地区" class="pull-left item-right" style="width:200px">
		        <el-select v-model="searchData.toDistrictNo" placeholder="请选择" @change="changeDis1" clearable>
			        <el-option
					        v-for="item in optionDiq1"
					        :key="item.DistrictName"
					        :label="item.DistrictName"
					        :value="item.DistrictNo">
			        </el-option>
		        </el-select>
	        </el-form-item>
	        <el-form-item label="转入社区" class="pull-left item-right" style="width:200px">
		        <el-select v-model="CtyIdsTo" placeholder="请选择" @change="Commutysp1" clearable>
			        <el-option
					        v-for="item in optionsData2"
					        :key="item.SYS_ID"
					        :label="item.CName"
					        :value="item">
			        </el-option>
		        </el-select>
	        </el-form-item>
	        <el-form-item class="pull-left" label="">
		        <el-input v-model="searchData.key" style="width: 210px;margin-left: -60px;"
		                  placeholder="研究对象手机号、研究编号"></el-input>
	        </el-form-item>
            <el-button type="primary" @click="checkList" class="pull-right mg-lr-20 pd-bt">查询</el-button>
        </el-form>
        <!---->
        <template>
            <el-table
                    :data="tableData"
                    border
                    v-loading="loading"
                    element-loading-text="加载中"
                    style="width: 100%">
                <el-table-column
                        prop="CreateTime"
                        align="center"
                        label="转移社区时间"
                        :show-overflow-tooltip="true"
                        min-width="160">
                </el-table-column>
                <el-table-column
                        prop="NurseUsercode"
                        label="操作人账号"
                        align="center"
                        min-width="120">
                </el-table-column>
	            <el-table-column
			            prop="Nurse"
			            label="操作人姓名"
			            align="center"
			            min-width="120">
	            </el-table-column>
	            <el-table-column
			            prop="Surname"
			            label="姓名首字母"
			            align="center"
			            min-width="120">
	            </el-table-column>
                <el-table-column
                        prop="Mobile"
                        label="手机号"
                        align="center"
                        min-width="120">
                </el-table-column>
	            <el-table-column
			            prop="ResearchNo"
			            label="研究编号"
			            align="center"
			            min-width="120">
	            </el-table-column>
	            <el-table-column
			            prop="InDistrictName"
			            label="入组所在地区"
			            :show-overflow-tooltip="true"
			            align="center"
			            min-width="120">
	            </el-table-column>
	            <el-table-column
			            prop="InCName"
			            label="入组所在社区"
			            align="center"
			            min-width="120">
	            </el-table-column>
	            <el-table-column
			            prop="ToDistrictName"
			            label="转入地区"
			            :show-overflow-tooltip="true"
			            align="center"
			            min-width="120">
	            </el-table-column>
	            <el-table-column
			            prop="ToCName"
			            label="转入社区"
			            align="center"
			            min-width="120">
	            </el-table-column>
	            <el-table-column
			            prop="TransforReason"
			            label="转移社区原因"
			            align="center"
			            min-width="120">
	            </el-table-column>
            </el-table>
        </template>
        <!--分页-->
        <div class="block mg-20-auto pagination-fixed">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="pageId"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                searchData:{
                	key:'',
	                inDistrictNo:'',
	                inCommunityId:'',
	                toDistrictNo:'',
	                toCommunityId:''
                },
	            optionDiq1:[],
	            optionsData1:[],  //社区数据
                timeDate:[],
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                    },{
                        text: '最近一个月',
                            onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                       }
                    },{
                        text: '最近三个月',
                            onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                      }
                    }],
               },
                pageId:1,
                total:null,
                loading:true,
                pageSize:10,
                tableData:[],
                maxHeight:'',
	            CtyIds:'',
	            CtyIdsTo:'',
	            optionsData2:[],
            }
        },
        async mounted(){
            let that=this;
	        let now = new Date();
	        let nowTime = now.getTime() ;
	        let day = now.getDay();
	        if(day==0){     //西方从周日算为第一天    2018/10/28
		        day=7
	        }
	        let oneDayLong = 24*60*60*1000 ;
	        let MondayTime = nowTime - (day-1)*oneDayLong;
	        let SundayTime =  nowTime + (7-day)*oneDayLong ;
	        let monday = dateForm(new Date(MondayTime));
	        let sunday = dateForm(new Date(SundayTime));
	        that.timeDate= [ //初始化时间范围
		        monday,
		        sunday
	        ];
	        await  this.GetCommunityDistrict()
            that.getList()
        },
        beforeMount(){
            let that=this;
            let appHeight=$(window).height();
            let autoheight=(appHeight-250)+'px'
            that.maxHeight=autoheight;
        },
        methods: {
	        async GetCommunityDistrict(){    //获取社区行政区
		        let that = this;
		        await that.service({
			        url: "/Dic/GetCommunityDistrict",
			        method: "get",
			        params: {
			        }
		        }).then(response => {
			        that.optionDiq1=response.dtData;
		        }).catch(data => {

			    });
	        },
	        // 获取社区列表
	        async getComselectList(){
		        let that = this;
		        await that.service({
			        url: "dic/GetCommunity",
			        method: "get",
			        params: {
				        cName: "",
				        cGroup: "",
				        districtNo:that.searchData.inDistrictNo||'',
				        pageCount:0,
				        pageSize: 100,
			        }
		        }).then(resp => {
			        if(that.searchData.inDistrictNo && that.searchData.inDistrictNo!=''){
				        that.optionsData1=resp.dtData
			        }
			        else{
				        that.optionsData1=[]
			        }
		        }).catch(data => {

		        });
	        },
	        // 获取社区列表
	        async getComselectList1(){
		        let that = this;
		        await that.service({
			        url: "dic/GetCommunity",
			        method: "get",
			        params: {
				        cName: "",
				        cGroup: "",
				        districtNo:that.searchData.toDistrictNo||'',
				        pageCount:0,
				        pageSize: 100,
			        }
		        }).then(resp => {
			        if(that.searchData.toDistrictNo && that.searchData.toDistrictNo!=''){
				        that.optionsData2=resp.dtData
			        }
			        else{
				        that.optionsData2=[]
			        }

		        }).catch(data => {

		        });
	        },
	        Commutysp (val) {
		        this.CtyIds=val.CName
		        val.SYS_ID!==undefined?this.searchData.inCommunityId=val.SYS_ID:this.searchData.inCommunityId=''
	        },
	        changeDis(val) {
		        this.CtyIds=''
		        this.searchData.inCommunityId=''
		        this.optionsData1= [];
		        if(val){
			        this.getComselectList()
		        }
	        },
	        Commutysp1 (val) {
		        this.CtyIdsTo=val.CName
		        val.SYS_ID!==undefined?this.searchData.toCommunityId=val.SYS_ID:this.searchData.toCommunityId=''
	        },
	        changeDis1(val) {
		        this.CtyIds=''
		        this.searchData.toCommunityId=''
		        this.optionsData2= [];
		        if(val){
			        this.getComselectList1()
		        }
	        },
            checkList:function(){   //查询
                this.pageId=1;
                this.pageSize=10;
                this.total=null;
                this.getList()
            },
            handleSizeChange(val) {       //条数改变
                this.pageSize=val;
                this.getList()
            },
            handleCurrentChange(val) {    //页数改变
                this.pageId = val
                this.getList()
            },
            getList:function(){           //获取一级信息列表
                let that=this
                that.loading=true
                that.service({
                    url:'/Log/GetTransforCommunityLog',
                    method:'get',
                    params:{
                        pageCount:(that.pageId-1),
                        pageSize:that.pageSize,
                        startDate:that.timeDate?that.timeDate[0]:'',
                        endDate:that.timeDate?that.timeDate[1]:'',
	                    ...that.searchData
                }
                }).then(response=>{
                	console.log(response)
                    that.tableData=response.dtData;
                    that.total =parseInt(response.dtData[0].TotalCount);
                    that.loading=false
                }).catch(data=>{
                    that.loading=false
                })
            }
        }
    }
    function addZero(s){
        return s < 10 ? '0' + s: s;
    }
    function dateForm(data){
        return   new Date(data).getFullYear()+'-'+addZero((new Date(data).getMonth()+1))+'-'+addZero(new Date(data).getDate())
    }
</script>
<style scoped lang="scss">
    .click_line{cursor: pointer;color:#409EFF;}
    .pagination-fixed{
        position: static;
    }
</style>
